<template>
  <div class="user-index-container container">
    <el-tabs v-model="activeTab" tab-position="top" class="full-height">
      <el-tab-pane :label="$t('user.user')" name="user" lazy>
        <div class="lin-flex full-height full-width">
          <el-scrollbar class="dept-container full-height">
            <el-tree
              :data="deptTree"
              :props="defaultDeptTreeProps"
              :expand-on-click-node="false"
              default-expand-all
              highlight-current
              class="dept-tree margin-bottom-10"
              @node-click="onClickDept"
            >
              <span slot-scope="{ node, data }" class="dept-tree-node">
                <span>{{ node.label }}</span>
                <el-dropdown v-if="node.label!=='全部部门'" @command="(command)=>onCommandDept(command, data)">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">{{ $t('dept.edit') }}</el-dropdown-item>
                    <el-dropdown-item command="delete" style="color: #F56C6C">{{ $t('dept.delete') }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </el-tree>
            <div class="lin-flex lin-flex-between">
              <el-button plain size="mini" icon="el-icon-plus" @click="onAddDept">{{ $t('dept.addDept') }}</el-button>
              <el-button plain size="mini" icon="el-icon-setting" @click="onManageDept">
                {{ $t('dept.manageDept') }}
              </el-button>
            </div>
          </el-scrollbar>

          <div class="user-container full-height">
            <div class="query-container lin-flex lin-flex-between">
              <div class="left-panel lin-flex">
                <el-input v-model="userListQuery.Query" placeholder="" size="mini" />
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  style="margin-left: 10px"
                  @click="onSearchUser"
                >
                  {{ $t('user.search') }}
                </el-button>
              </div>
              <div class="right-panel">
                <el-button type="primary" icon="el-icon-plus" @click="onAddUser">
                  {{ $t('user.addUser') }}
                </el-button>
                <el-button type="danger" icon="el-icon-delete" plain @click="onBatchDeleteTerminate">
                  {{ $t('user.batchTerminate') }}
                </el-button>
              </div>
            </div>

            <div class="margin-top-10">
              <el-table
                :data="userList"
                border
                fit
                highlight-current-row
              >
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column
                  label="ID"
                  sortable
                  prop="Id"
                  width="55"
                >
                  <template slot-scope="scope">
                    {{ scope.row.Id }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.name')"
                  sortable
                  prop="Username"
                  width="80"
                >
                  <template slot-scope="scope">
                    {{ scope.row.Name }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.username')"
                  sortable
                  prop="Username"
                  width="95"
                >
                  <template slot-scope="scope">
                    {{ scope.row.Username }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.email')"
                  sortable
                  prop="Email"
                  width="120"
                >
                  <template slot-scope="scope">
                    {{ scope.row.Email }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.dept')"
                  prop="Dept"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <el-tag v-for="dept in scope.row.DeptIdList" :key="dept">{{ dept }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.role')"
                  prop="Role"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <el-tag v-for="role in scope.row.RoleIdList" :key="role">{{ role }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('user.status')"
                  prop="Status"
                  align="center"
                  width="60"
                >
                  <template slot-scope="scope">
                    {{ $t(`user.${scope.row.Status.toLowerCase()}`) }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="lin-flex lin-flex-center">
                      <el-link type="primary" :underline="false" @click="onEditUser(scope.row)">
                        {{ $t('user.viewDetail') }}
                      </el-link>
                      <el-dropdown class="margin-left-10">
                        <span class="el-dropdown-link">
                          {{ $t('user.more') }}<i class="el-icon-arrow-down el-icon--right" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>{{ $t('user.changeDept') }}</el-dropdown-item>
                          <el-dropdown-item>{{ $t('user.terminate') }}</el-dropdown-item>
                          <el-dropdown-item>{{ $t('user.hideUser') }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="userTotal>0"
                :total="userTotal"
                :page.sync="userListQuery.Page"
                :limit.sync="userListQuery.PageSize"
                @pagination="fetchUserList"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane :label="$t('user.dept')" name="dept" lazy />

    </el-tabs>

    <user-dialog v-model="userDialog" @refresh-list="fetchUserList" />
    <dept-dialog v-model="deptDialog" @refresh-list="fetchDeptList" />
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import UserDialog from '@/views/user/components/UserDialog'
import { fetchUserList } from '@/api/user'
import { fetchDeptList } from '@/api/dept'
import DeptDialog from '@/views/user/components/DeptDialog'
import Pagination from '@/components/Pagination'

const defaultUserForm = {
  Name: '',
  Email: '',
  RoleIdList: [],
  DeptIdList: [],
  Status: 'Show',
  EnName: '',
  Avatar: '',
  Username: '',
  Password: ''
}

const defaultDeptForm = {
  Title: '',
  Desc: ''
}

export default {
  name: 'UserIndex',
  components: { DeptDialog, UserDialog, Pagination },
  data() {
    return {
      activeTab: 'user',
      userList: [],
      userTotal: 0,
      userDialog: {
        status: '',
        show: false,
        title: '',
        form: deepClone(defaultUserForm),
        loading: false,
        checkPass: ''
      },
      userListQuery: {
        Page: 1,
        PageSize: 10,
        DeptId: '',
        Query: ''
      },
      deptList: [],
      deptTree: [],
      deptTotal: 0,
      deptDialog: {
        show: false,
        title: '',
        form: deepClone(defaultDeptForm)
      },
      defaultDeptTreeProps: {
        children: 'children',
        label: 'Title'
      }
    }
  },
  created() {
    this.fetchUserList()
    this.fetchDeptList()
  },
  methods: {
    async fetchUserList() {
      const data = await fetchUserList(this.userListQuery)
      this.userList = data.Data
      this.userTotal = data.Count
    },
    async fetchDeptList() {
      const data = await fetchDeptList()
      this.deptList = data.Data
      this.deptTree = [{ Title: this.$t('dept.allDept'), children: data.Data }]
      this.deptTotal = data.Count
    },
    onAddUser() {
      this.$set(this.userDialog, 'form', deepClone(defaultUserForm))
      this.$set(this.userDialog, 'title', this.$t('user.addUser'))
      this.$set(this.userDialog, 'checkPass', '')
      this.$set(this.userDialog, 'status', 'add')
      this.$set(this.userDialog, 'show', true)
    },
    onEditUser(row) {
      this.$set(this.userDialog, 'form', deepClone(row))
      this.$set(this.userDialog, 'title', this.$t('user.editUser'))
      this.$set(this.userDialog, 'checkPass', '')
      this.$set(this.userDialog, 'status', 'edit')
      this.$set(this.userDialog, 'show', true)
    },
    onBatchDeleteTerminate() {

    },
    onSearchUser() {
      this.$set(this.userListQuery, 'Page', 1)
      this.fetchUserList()
    },
    onAddDept() {
      this.$set(this.deptDialog, 'form', deepClone(defaultDeptForm))
      this.$set(this.deptDialog, 'title', this.$t('dept.addDept'))
      this.$set(this.deptDialog, 'status', 'add')
      this.$set(this.deptDialog, 'show', true)
    },
    onManageDept() {
      this.activeTab = 'dept'
    },
    onClickDept(node) {
      if (node.Id) {
        this.$set(this.userListQuery, 'DeptId', node.Id)
      } else {
        this.$set(this.userListQuery, 'DeptId', null)
      }
      this.$set(this.userListQuery, 'Page', 1)
      this.fetchUserList()
    },
    onCommandDept(command, data) {
      if (command === 'edit') {
        this.onEditDept(data)
      }
    },
    onEditDept(data) {
      this.$set(this.deptDialog, 'form', deepClone(data))
      this.$set(this.deptDialog, 'title', this.$t('dept.editDept'))
      this.$set(this.deptDialog, 'status', 'edit')
      this.$set(this.deptDialog, 'show', true)
    }
  }
}
</script>

<style lang="scss">
.dept-container {
  width: 250px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  height: 100%;

  .dept-tree {
  }

  .el-tree-node__content {
    height: 34px !important;
  }

  .dept-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px;
    margin-top: 5px;
  }
}

.user-container {
  padding: 0 10px;
  flex: 1 1 auto;

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-weight: 500;
  }
}
</style>
